认识 Backbone（二） : 什么是 View

Backbone 中的 View 用来反映你 app 中 Model 的模样。它们会监听事件并作出相应的反应。
接下来的教程我不会告诉你如何把 Model 和 Collection 绑定到 View 上，而是主要讨论 View 是如何使用 javascript 模板库的，尤其是 Underscore.js's _.template。
这里我们使用 jQuery 来操作 DOM 元素，当然你也可以使用其他的库，例如 MooTools 或者 Sizzle,但是 Backbone 的官方文档推荐我们使用 jQuery。
接下来，我们以搜索框为例来新建一个 View：

SearchView = Backbone.View.extend({
    initialize: function(){
        alert("Welcome to Backbone!");
    }
});
var search_view = new SearchView();

在《认识 Backbone（一） ： 什么是 Model》一文我已经提到，无论是 Model，View 还是 Collection，当被实例化时，initialize() 方法都会被自动触发。

el 属性

el 属性指的是已经在浏览器中创建好的 DOM 对象，每个 View 都有一个 el 属性，如果它未被定义，Backbone 将会自己创建一个空的 div 元素作为 el 属性。
下面让我们来为 View 创建一个 el 属性，并设为 #search_containe。

<div id="search_container"></div>
<script type="text/javascript">
    SearchView = Backbone.View.extend({
        initialize: function(){
            alert("Welcome to Backbone!");
        }
    });

    var search_view = new SearchView({ el: $("#search_container") });
</script>

此时，View 的 el 属性指的是 id 为 search_container 的 div 元素。我们此时变绑定了这个 div 元素，那么任何我们希望触发的事件都必须在这个 div 元素中。

加载模板

Backbone 是强依赖于 Underscore.js 的，所以我们可以使用 Underscore.js 中的小型模板。
现在，让我们添加一个 render() 方法，并且在 initialize() 中调用它，这样当 View 初始化时便会自动触发 render() 方法。
这个 render() 方法将会通过 jQuery 把模板加载到 View 的 el 属性中去。

<script type="text/template" id="search_template">
  <label>Search</label>
  <input type="text" id="search_input" />
  <input type="button" id="search_button" value="Search" />
</script>

<div id="search_container"></div>

<script type="text/javascript">
    SearchView = Backbone.View.extend({
        initialize: function(){
            this.render();
        },
        render: function(){
            // 通过 Underscore 编译生成模板
            var template = _.template( $("#search_template").html(), {} );
            //讲生成的模板加载到 el 属性中
            this.$el.html( template );
        }
    });

    var search_view = new SearchView({ el: $("#search_container") });
</script>

添加监听事件

我们使用 View 的 events 属性添加监听事件，记住监听事件只能添加到 el 属性的子元素上。现在，我们来给子元素 button 添加一个监听事件。

<script type="text/template" id="search_template">
  <label>Search</label>
  <input type="text" id="search_input" />
  <input type="button" id="search_button" value="Search" />
</script>

<div id="search_container"></div>

<script type="text/javascript">
    SearchView = Backbone.View.extend({
        initialize: function(){
            this.render();
        },
        render: function(){
            var template = _.template( $("#search_template").html(), {} );
            this.$el.html( template );
        },
        events: {
            "click input[type=button]": "doSearch"
        },
        doSearch: function( event ){
            // 当 button 被点击时触发 alert 
            alert( "Search for " + $("#search_input").val() );
        }
    });

    var search_view = new SearchView({ el: $("#search_container") });
</script>

向模板中传递参数

模板可以通过 <%= %> 的形式使用从 View 中传来的参数。

<script type="text/template" id="search_template">
    <!-- 通过 <%= %> 形式使用传来的参数 -->
    <label><%= search_label %></label>
    <input type="text" id="search_input" />
    <input type="button" id="search_button" value="Search" />
</script>

<div id="search_container"></div>

<script type="text/javascript">
     SearchView = Backbone.View.extend({
        initialize: function(){
            this.render();
        },
        render: function(){
            //定义需要传递的参数
            var variables = { search_label: "My Search" };
            // 通过 Underscore 生成模板，同时传递参数
            var template = _.template( $("#search_template").html(), variables );
            // Load the compiled HTML into the Backbone "el"
            this.$el.html( template );
        },
        events: {
            "click input[type=button]": "doSearch"  
        },
        doSearch: function( event ){
            alert( "Search for " + $("#search_input").val() );
        }
    });

    var search_view = new SearchView({ el: $("#search_container") });
</script>

参考

http://backbonetutorials.com/what-is-a-view/
http://documentcloud.github.io/underscore/

http://jsfiddle.net/tBS4X/1/